   /** @type {HTMLCanvasElement} */
   // 初始化画板
   const canvas = document.querySelector('#canvas');
   canvas.width = window.innerWidth;
   canvas.height = window.innerHeight;

   // 初始化画笔
   const cvs = canvas.getContext('2d');
   let CircleArr = [];

   // 实例化对象

   canvas.addEventListener('mousemove', function (ev) {
       let cir = new Circle(ev.pageX, ev.pageY);
       CircleArr.push(cir);
   })

   canvas.addEventListener('touchmove', function (ev) {
       let cir = new Circle(ev.touches[0].clientX, ev.touches[0].clientY);
       CircleArr.push(cir);
   })

   /**
    * 主要参数位置
    */
   function Circle(X, Y) {
       this.X = Math.floor(X);
       this.Y = Math.floor(Y);
       this.speedX = Math.floor((Math.random() - 0.5) * 4);
       this.speedY = Math.floor((Math.random() - 0.5) * 4);
       this.A = 1;
       this.R = +document.getElementById('cvs').getAttribute('circleWidth') || 20;

   }

   Circle.prototype = {
       // 画圆
       draw() {
           cvs.beginPath();
           cvs.fillStyle =
               `rgb(${Math.floor(Math.random()*255)},${Math.floor(Math.random()*255)},${Math.floor(Math.random()*255)})`;
           cvs.globalCompositeOperation = "lighter";
           cvs.globalAlpha = this.A;
           cvs.arc(this.X, this.Y, this.R, 0, Math.PI * 2);
           cvs.fill();
           this.upDate();
       },
       // 更新圆的状态
       upDate() {
           this.X += this.speedX;
           this.Y += this.speedY;
           this.A *= 0.98;
       }
   }

   // 清除重画
   function render() {
       cvs.clearRect(0, 0, canvas.width, canvas.height);
       CircleArr.forEach(function (ele, i) {
           ele.draw();
           // 删除已经执行完的圆优化性能
           if (ele.A < 0.03) {
               CircleArr.splice(i, 1)
           }
       });
       //关键帧的刷新
       requestAnimationFrame(render);
   }
   render()